<template>
  <div class="container">
    <div class="header">
      <a href="javascript:void(0)"><img class="logo" src="../../assets/images/logo2.png" height="48" width="164"/></a>
      <a href="javascript:void(0)"><img class="happy" src="../../assets/images/618.png" height="144" width="320"/></a>
      <div class="app">
        <span class="iconfont icon-search"></span>
        <div class="download">
          <a href="javascript:void(0)" class="download-app">下载APP</a>
          <a href="javascript:void(0)" class="column"></a>
          <a href="javascript:void(0)" class="download-login">登录</a>
        </div>
      </div>
    </div>
    <div class="course-item">
      <ul>
        <li><a href="javascript:void(0)" class="cur-active">首页</a></li>
        <li><a href="javascript:void(0)">课程</a></li>
        <li><a href="javascript:void(0)">实战</a></li>
        <li><a href="javascript:void(0)">就业班</a></li>
        <li><a href="javascript:void(0)">专栏</a></li>
        <li><a href="javascript:void(0)">手记</a></li>
        <li><a href="javascript:void(0)">猿问</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>
<!--直接写px，编译后会直接转化成rem &#45;&#45;&#45;&#45; 除开下面两种情况，其他长度用这个-->
<!--在px后面添加/*no*/，不会转化px，会原样输出。 -&#45;&#45; 一般border需用这个-->
<!--在px后面添加/*px*/,会根据dpr的不同，生成三套代码。&#45;&#45;&#45;&#45; 一般字体需用这个，
dpr为1时chorme显示最小字体为12px，-->

<!--<style scoped src="../static/css/user.css">-->
<style lang="stylus" scoped>
.container
  background-color white
  position fixed
  z-index: 9;
  top: 0
  width 100%
  .header
    padding  0 28px
    height 125px
    line-height 125px
    .logo
      width 165px
      height 50px
      margin-right 20px
    .happy
      height 70px
      width 160px
    .app
      float right
      height 65px
      line-height 65px
      .icon-search
        font-size 40px /*px*/
        opacity .7
        float left
        margin-top 30px
        margin-right 20px
      .download
        width 255px
        height 65px
        line-height 65px
        margin-top 30px
        border-radius 65px
        display inline-block
        background: rgba(242,13,13,.06)
        border-radius 65px
        .download-app
          width 152px
        .download-login
          width 100px
        .column
          margin-top: .26666667rem;
          width: .02666667rem;
          height: .32rem;
          background: rgba(242,13,13,.2);
        a
          color: #F01414;
          font-weight 1000
          float left
          text-align center
          font-size 25px/*px*/
.course-item
  margin-top 30px
  ul
    display flex
    li
      flex-grow: 1
      text-align center
      a
        font-size 32px/*px*/
        font-weight bolder
        color #71777d
      a.cur-active
        color: #F01414
</style>
